<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0" />
		<title></title>
		<link rel="stylesheet" href="jquery.mobile.min.css" />
		<link rel="stylesheet" type="text/css" href="app.css" />
		<link rel="stylesheet" href="mui.min.css" />
		<script src="jquery-2.1.4.min.js"></script>
		<script src="jquery.mobile.min.js"></script>
    <title>111111</title>
   
</head>
<body>
	<div data-role="page" id="login">
			<div data-role="content">
				<img src="image.png" style="width: 50%;margin-left: 25%;" />
					<input type="text" name="username" id="username" placeholder="账号:" />
					<input type="text" name="password" id="password" placeholder="密码:" />
					<fieldset >
						<div>
							<button type="submit" data-theme="e" onclick="getdata()">登录</button>
						</div>
					</fieldset>
			</div>
		</div>
		
</body>
<script>
		function getdata() {
			var url = 'http://localhost:8080/usercontroller/login';
			var username = $("#username").val();
			var password = $("#password").val();
			if(username == "") {
				alert("账号不能为空！");
				$('#username').focus();
				window.location.reload();

			} else if(password == "") {
				alert("密码不能为空！");
				$('#password').focus(); //判断输入框是否有值
				window.location.reload();

			} else {
				var s={
					"username": username, //数据打包
					 "password": password,
				};
				$.ajax({
					type: "post", //post方式传输，比get更加密安全
					url: url, //请求地址
					data:s,
					success: function(data) {
						var str = JSON.stringify(data);
					},
					error: function() {
						alert("失败");
					}
				})
			}
			}
	</script>
</html>